<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
    	<title>系统菜单</title>
    	<jsp:include page="/commons/head.jsp"></jsp:include>
	</head>
  
  	<body>
    	
    	<span class="layui-breadcrumb">
		  	<a href="/" target="_top">CRM</a>
		  	<a href="javascript:">管理系统</a>
		  	<a><cite>系统菜单</cite></a>
		</span>
		
		<div>
			<button class="layui-btn layui-btn-normal openEdit">添加</button>
		</div>
		
		<form class="layui-form" action="">
			<table class="layui-table" id="tableList">
			  	<colgroup>
			    	<col width="200">
			    	<col width="240">
			    	<col width="100">
			    	<col width="200">
			    	<col>
			  	</colgroup>
		  		<thead>
		    		<tr>
				      	<th>菜单名称</th>
				      	<th>URL</th>
				      	<th>状态</th>
				      	<th>创建时间</th>
				      	<th>操作</th>
		    		</tr> 
		  		</thead>
		  		<tbody></tbody>
			</table>
		</form>
    	
    	<div id="div-edit" style="display:none;margin:15px 0;">
    		<form class="layui-form" id="formEdit" action="">
	    		<input type="hidden" name="menuId">
	    		<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">菜单名称</label>
				    <div class="layui-input-inline">
				      	<input type="text" name="menuName" lay-verify="required" placeholder="菜单名称" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">上级菜单</label>
				    <div class="layui-input-inline">
				      	<select name="superMenuCode">
					        <option value="">请选择</option>
				      	</select>
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">url</label>
				    <div class="layui-input-inline" style="width:504px;">
				      	<input type="text" name="url" placeholder="url地址" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">url参数</label>
				    <div class="layui-input-inline" style="width:504px;">
				      	<input type="text" name="parameter" placeholder="url参数" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">打开方式</label>
				    <div class="layui-input-inline">
				      	<select name="target">
					        <option value="">默认（管理系统右侧打开）</option>
					        <option value="_blank">新窗口打开</option>
				      	</select>
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">排列系数</label>
				    <div class="layui-input-inline">
				      	<input type="text" name="orderNum" lay-verify="required" placeholder="排列系数" class="layui-input">
				    </div>
				</div>
				<div style="text-align:right;padding-right:26px;">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveForm">保存</button>
					<button class="layui-btn layui-btn-primary" id="btn-edit-cancel">取消</button>
				</div>
			</form>
    	</div>
    	
  	</body>
</html>
<script type="text/javascript">
layui.use(['element', 'form', 'laypage', 'layer'], function(){
	var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块
	var form = layui.form();
	var laypage = layui.laypage;
	var layer = layui.layer;
	
	sysMenuList();
	
	form.on('submit(saveForm)', function(data){
		var field = data.field;
		field.operating = 'save';
		var retJson = ajaxFun('/sys/sysMenu', field);
    	if(retJson.code==1){
    		sysMenuList();
    		
    		$('#btn-edit-cancel').click();
    		layer.msg('保存成功');
    	}else{
    		if(retJson.msg!=null){
    			layer.msg(retJson.msg);
    		}
    	}
    	return false;
	});
	
	
	function bindOperatingClick(){
		$('.openEdit').on('click', function(){
			var menuId = $(this).attr('menuId');
			var retJson = {data : {}};
			if(menuId!=null && menuId!=''){
				retJson = ajaxFun('/sys/sysMenu', {operating : 'get', menuId : menuId});
				if(retJson.code != 1){
					layer.msg(retJson.msg);
					return false;
				}
			}
			
			var data = retJson.data;
			$('#formEdit [name=menuId]').val(objectToVal(data.menuId));
			$('#formEdit [name=menuName]').val(objectToVal(data.menuName));
			$('#formEdit [name=superMenuCode]').val(objectToVal(data.menuCode==null?'':data.menuCode.substring(0, data.menuCode.length-3)))
			if(data.menuId!=null){
				$('#formEdit [name=superMenuCode]').attr('disabled', true);
			}else{
				$('#formEdit [name=superMenuCode]').attr('disabled', false);
			}
			$('#formEdit [name=url]').val(objectToVal(data.url));
			$('#formEdit [name=parameter]').val(objectToVal(data.parameter));
			$('#formEdit [name=target]').val(objectToVal(data.target));
			$('#formEdit [name=orderNum]').val(objectToVal(data.orderNum));
			form.render('select');
			
			var index = 
				layer.open({
					type: 1,
					title : (menuId==null||menuId==0 ? '新增' : '修改') + '系统菜单信息',
					content : $('#div-edit'),
					area : '640px'
				});
			
			$('#btn-edit-cancel').click(function(){
				layer.close(index);
				return false;
			});
			return false;
		});
		
		$('.delete').on('click', function(){
			var menuId = $(this).attr('menuId');
			var menuName = $(this).attr('menuName');
			var index = layer.confirm('确认删除系统菜单：'+menuName, {
						  	btn: ['确定','取消']
						}, function(){
							retJson = ajaxFun('/sys/sysMenu', {operating : 'delete', menuId : menuId});
							if(retJson.code==1){
								sysMenuList();
								layer.close(index);
								layer.msg('删除成功.');
							}else{
								layer.msg(retJson.msg);
							}
						}, function(){
						  	//点击取消按钮执行的方法
						});
		});
	}
	
	function sysMenuList(){
		$('#tableList tbody').html('');
		
		var retJson = ajaxFun('/sys/sysMenu', {});
		var html = '', editSuperMenuHtml = '<option value="">请选择</option>';
		for(var i=0,len=retJson.length; i<len; i++){
			html += '<tr>';
			html += 	'<td>'+retJson[i].menuName+'</td>';
			html += 	'<td>'+objectToVal(retJson[i].url)+'</td>';
			html += 	'<td>'+(retJson[i].status==1?'<span class="status1">正常</span>':'<span class="status0">禁用</span>')+'</td>';
			html += 	'<td>'+retJson[i].createTime+'</td>';
			html += 	'<td class="operating">';
			html += 		'<a href="javascript:" class="openEdit first" menuId="'+retJson[i].menuId+'">编辑</a>';
			html += 		'<a href="javascript:" class="delete" menuId="'+retJson[i].menuId+'" userName="'+retJson[i].menuName+'">删除</a>';
			html += 	'</td>';
			html += '</tr>';
			for(var j=0,size=retJson[i].list.length; j<size; j++){
				html += '<tr>';
				html += 	'<td style="padding-left:46px;">'+retJson[i].list[j].menuName+'</td>';
				html += 	'<td>'+objectToVal(retJson[i].list[j].url)+'</td>';
				html += 	'<td>'+(retJson[i].list[j].status==1?'<span class="status1">正常</span>':'<span class="status0">禁用</span>')+'</td>';
				html += 	'<td>'+retJson[i].list[j].createTime+'</td>';
				html += 	'<td class="operating">';
				html += 		'<a href="javascript:" class="openEdit first" menuId="'+retJson[i].list[j].menuId+'">编辑</a>';
				html += 		'<a href="javascript:" class="delete" menuId="'+retJson[i].list[j].menuId+'" menuName="'+retJson[i].list[j].menuName+'">删除</a>';
				html += 	'</td>';
				html += '</tr>';
			}
			editSuperMenuHtml += '<option value="'+retJson[i].menuCode+'">'+retJson[i].menuName+'</option>'
		}
		$('#tableList tbody').append(html);
		$('#formEdit [name=superMenuCode]').html(editSuperMenuHtml);
		form.render();
		bindOperatingClick();
	}
	
	function objectToVal(o){
		if(o==null || o=='undefined'){
			return '';
		}
		return o;
	}

});
</script>
